<div class="fui-input-number-handler-wrap">
  <a class="fui-input-number-handler fui-input-number-handler-up"
    [ngClass]="{'fui-input-number-handler-up-disabled':disabledUp}"
    (click)="numberUp($event)">
    <span
      class="fui-input-number-handler-up-inner"
      (click)="$event.preventDefault();"
    >
      <svg fuiIcon="caret-up" color="secondary"></svg>
    </span>
  </a>
  <a
    class="fui-input-number-handler fui-input-number-handler-down"
    [ngClass]="{'fui-input-number-handler-down-disabled':disabledDown}"
    (click)="numberDown($event)">
    <span
      class="fui-input-number-handler-down-inner"
      (click)="$event.preventDefault();"
    >
      <svg fuiIcon="caret-down" color="secondary"></svg>
    </span>
  </a>
</div>
<div class="fui-input-number-input-wrap">
  <input class="fui-input-number-input"
    #inputElement
    type="text"
    [ngModel]="displayValue"
    [placeholder]="placeholder"
    [disabled]="disabled"
    [readonly]="readonly"
    [ngClass]="{'fui-input-invalid': shouldValidate && (invalid | async)}"
    [attr.min]="fuiMinValue"
    [attr.max]="fuiMaxValue"
    [attr.step]="step"
    autocomplete="off"
    (ngModelChange)="onModelChange($event)"
    (blur)="onInputBlur()"
  >
</div>

<fui-form-error
  *ngIf="shouldValidate && (invalid | async)"
  [validationResults]="failures | async"
  [errorMsgs]="errorMsgs"
>
</fui-form-error>
